<template>
  <div v-if="trendShow">
    <div class="h12" />
    <el-card>
      <div slot="header" class="clearfix flex">
        <b>趋势分析</b>
        <div class="search-container" style="display:flex;">
          <el-tooltip class="item" effect="dark" content="此选择项代表查询出来数据是合并在同一趋势图中显示还是按不同的属性分别显示为独立的趋势图" placement="top">
            <el-radio-group v-model="displayType" class="mr12">
              <el-radio-button
                v-for="(item,index) in displayTypes"
                :key="index"
                :label="item.value"
              >{{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="此选择项代表查询出来数据的间隔时间，如1天指的是1天显示1条数据" placement="top">
            <el-radio-group v-model="interType" class="mr12">
              <el-radio-button
                v-for="(item,index) in interTypes"
                :key="index"
                :label="item.value"
              >{{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-tooltip>
          <el-date-picker
            v-model="timetran"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button type="primary" class="btn" @click="search">查询</el-button>
        </div>
      </div>
      <div class="trend-container-common">
        <div v-if="displayType === 1">
          <ve-line
            v-if="rawData && rawData.categories && rawData.categories.length > 0"
            :extend="chartExtend"
            :data="chartData"
            :settings="chartSettings"
          />
          <el-empty v-else description="暂无任何趋势分析数据" />
        </div>
        <div v-else>
          <template v-if="rawData && rawData.series">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane v-for="(item,index) in rawData.series" :key="index" :label="item.name" :name="'activeName'+index">
                <div v-if="activeName === 'activeName'+index">
                  <el-empty v-if="getChartData(item).rows.length === 0" description="暂无任何趋势分析数据" />
                  <div v-else>
                    <ve-line v-if="item.type === 'line'" :data="getChartData(item)" :extend="chartExtend" :settings="chartSettings" />
                    <ve-histogram v-else :data="getChartData(item)" :extend="chartExtend" :settings="chartSettings" />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAll } from '@/api/statistics'
export default {
  data() {
    return {
      activeName: 'activeName0',
      interType: '1h',
      interTypes: [
        { value: '1h', name: '1小时' },
        { value: '1d', name: '1天' },
        { value: '30d', name: '1月' }
      ],
      displayTypes: [{ value: 1, name: '合并显示' }, { value: 2, name: '分开显示' }],
      displayType: 2,
      timetran: '',
      listQuery: { day: 1 },
      rawData: null,
      chartData: null,
      chartSettings: {}
    }
  },
  computed: {
    ...mapGetters(['currentDevice', 'currentDeviceShow']),
    trendShow() {
      return this.currentDevice.rtuPortDisplays.filter((val) => {
        return val.identity.indexOf('census') > -1
      }).length > 0
    },
    chartExtend() {
      const legendShow = this.displayType === 1
      return {
        legend: {
          show: legendShow
        },
        series: {
          showSymbol: false
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        }
      }
    }
  },
  watch: {
    currentDeviceShow: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getStatistics(this.listQuery)
        }
      },
      deep: true,
      immediate: true
    },
    interType(newVal, oldVal) {
      this.getStatistics({ per: newVal })
    }
  },
  methods: {
    getChartData(item) {
      const columns = ['日期', item.name]
      const rows = []
      const categories = this.rawData.categories || []
      item.data.forEach((val, index) => {
        const citem = {}
        citem['日期'] = categories[index]
        citem[item.name] = val
        rows.push(citem)
      })
      const res = {
        columns,
        rows
      }
      return res
    },
    search() {
      this.getStatistics({ created_at: this.timetran })
    },
    async getStatistics(params) {
      Object.assign(this.listQuery, { serialno: this.currentDevice.serialno }, params)
      const { data } = await getAll(this.listQuery)
      this.rawData = data
      this.chartData = this.formatStatistics(data.categories, data.series)
      this.chartSettings = data.chartSettings
    },
    formatStatistics(categories, series) {
      const columns = ['日期']; const rows = []
      for (let i = 0; i < categories.length; i++) {
        const item = { '日期': categories[i] }
        for (const citem of series) {
          item[citem.name] = citem.data[i]
          if (i === 0) {
            columns.push(citem.name)
          }
        }
        rows.push(item)
      }
      return {
        columns: columns,
        rows: rows
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  align-items: center;
}
.search-container{
  margin-left:auto;
  .btn{
    margin-left:12px;
  }
}
</style>
